<template>
  <div class="container">
      <el-dialog
        title="同事信息"
        :visible.sync="dialogShow"
        width="600px">
          <div class="item" v-for="(item,i) in list" :key="i">
            <el-col :span="5" class="mr15">
              <el-input placeholder="姓名" v-model="list[i].name"></el-input>
            </el-col>
            <el-col :span="7" class="mr15">
              <el-input placeholder="邮箱" v-model="list[i].email"></el-input>
            </el-col>
            <el-col :span="7" class="mr15">
              <el-input placeholder="手机号码（选填）" v-model="list[i].phone"></el-input>
            </el-col>
            <el-col :span="3">
              <span style="line-height: 36px;" class="link-type" @click="removeItem(i)">删除</span>
            </el-col>
          </div>
            <div>
              <el-button type="text" @click="addItem"><i class="el-icon-plus"></i>新增</el-button>
            </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogShow = false">取 消</el-button>
            <el-button type="primary" @click="dialogShow = false">确 定</el-button>
        </span>
     </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
        dialogShow: false,
        list: [{}]
    };
  },
// 方法
  methods: {
      show(){
          this.dialogShow = true;
      },
      // 新增
      addItem(){
        this.list.push({
        });
      },
      removeItem(i){
        if(this.list.length > 1){
          this.list.splice(i,1);
        }else{
          this.$message({
            type: 'warning',
            message: '请至少保留一位同事信息'
          });
        }
        
      }
  },
// 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
// 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
// 销毁
  destroyed() {}
};
</script>
<style lang="scss" scoped>
  .item{
    margin-bottom: 20px;display: inline-block;
  }
</style>